/* 作者： 开发日期： 页面描述：组织人员 修改人员：**** 修改日期：**** */
<template>
  <div class="leaderboa_box_main_left2">
    <div class="org_person">
      <div class="org_person_left full_width">
        <div class="org_person_right_tips">单 位</div>
        <div class="org_person_right_main">
          <el-scrollbar class="full_height">
            <div v-for="(item, index) in tabsData" :key="item.id" @click="onOrgDetailsData(item, index)">
              <div class="org_person_right_info" :class="{ active_select2: item.id == activeId }">
                <div class="user_info">
                  <div class="user_name">{{ item.orgName }}</div>
                  <!-- <div :class="item.id == personActiveId ? 'active_select2' : 'user_job'">{{ item.mainRole }}</div> -->
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listAssessmentOrgan } from '@apis/mzEvaluation.js'
export default {
  name: 'OrgList',
  props: {
    selectParam: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    selectParam: {
      handler(obj) {
        if (obj.assessmentStatus && obj.key) {
          this.pageInit()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      tabsData: [],
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      activeId: '',
    }
  },
  created() {
    this.pageInit()
  },
  methods: {
    async pageInit() {
      const { assessmentStatus: status = '', key = '' } = this.selectParam
      const { year = '', quarter = '' } = this.handleQuarter(key)
      if (!status || !key) {
        return
      }
      const { data } = await listAssessmentOrgan({
        distinctLevel: this.userInfo.loginPostInfo.districtLevel,
        tenantId: localStorage.pskh_tenantId,
        status,
        year,
        quarter,
      })
      this.tabsData = data
      this.activeId = data[0].id
      // 个人
      this.$emit('select', this.tabsData[0])
    },
    // 处理季度数据
    handleQuarter(str) {
      if (!str) return {}
      const year = str.slice(0, 4)
      let quarter = 1
      if (str.includes('第一')) {
        quarter = 1
      } else if (str.includes('第二')) {
        quarter = 2
      } else if (str.includes('第三')) {
        quarter = 3
      } else {
        quarter = 4
      }
      return { year, quarter }
    },
    // 点击切换
    onOrgDetailsData(item) {
      this.activeId = item.id
      this.$emit('select', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.leaderboa_box_main_left2 {
  // padding-left: 25px;
  height: 100%;
}

.org_person {
  height: 100%;
  width: 100%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  .org_person_left {
    border: 1px solid #dcdfe6;
    // box-shadow: 4px 3px 4px 0 rgba(0, 0, 0, 0.12);
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .org_person_right_main {
    height: calc(100% - 50px);
    // /deep/ .el-scrollbar__wrap {
    // padding: 0 10px;
    // }
  }
  .org_person_right {
    height: 100%;
    border: 1px solid #dcdfe6;
  }
  .org_person_right_tips {
    height: 40px;
    color: #1852a3;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ececec;
    padding: 0 10px;
    font-weight: bold;
  }
  .active_select1 {
    background-color: rgba(0, 84, 196, 0.08);
    color: #2b78f1;
  }
  .org_person_left_name {
    line-height: 40px;
    // padding: 0 12%;
    padding-left: 10px;
    cursor: pointer;
    display: flex;
  }
  .org_person_left_name-1 {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #fff;
    margin: 18px 5px 0 0;
  }
  .org_person_left_name-2 {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #dcdfe6;
    margin: 18px 5px 0 0;
  }
  .org_person_right_info {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #ececec;
    height: 50px;
    padding-left: 10px;
    .user_name {
      font-size: 14px;
      color: #333;
    }
    .user_heade {
      font-size: 40px;
      margin-right: 10px;
    }
    .user_job {
      color: #a7a7a7;
    }
    .user_pig {
      color: #929191;
    }
  }
  .active_select2 {
    background-color: #0060c4;
    .user_name {
      color: #fff;
    }
  }
}
</style>
